import Link from "next/link";
import Avatar from "../../components/Avatar"

export default function Av(props) {
  console.log(props)
  return (
    <>
      <h1><Link href="/">Go back home</Link></h1>
      {<Avatar data={props.av} full={true} key={props.av.id} />}
    </>
  )
}

export async function getStaticProps({ params }) {
  const av = await fetch(`http://localhost:3000/api/avatars/${params.id}`).then(res => res.json());
  return {
    props: {
      av
    }
  }
}

export async function getStaticPaths() {
  const res = await fetch(`http://localhost:3000/api/avatars`).then(res => res.json());
  console.log("getStaticPaths  ", res)
  return {
    paths: res.map(av => `/av/${av.id}`),
    fallback: true,
  }
}